<template>
    <div id="login" class="userLogin" >
        <p class="login-title">用户登录</p>
        <el-form ref="userinfo" :model="userinfo" label-width="80px">
            <el-form-item label="账号：" prop="account" class="login-input">
                <el-input placeholder="请输入账号" v-model="userinfo.account" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password" class="login-input">
                <el-input placeholder="请输入密码" v-model="userinfo.password" show-password clearable></el-input>
            </el-form-item>
            <el-form-item label="" class="form-btn">
                <el-button type="primary" @click="login" class="login-btnLogin">登录</el-button>
                <el-button type="text" @click="register" class="login-btnRegister">还没有账号?马上去注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import instance from '@/utlis/request.js';

export default {
    name:"UserLogin",
    data(){
        return{
            userinfo:{
                account:'',
                password:'',
            },
            companyUser:{
                id:'',
                positionId:'',
            },
            rules: {
                account:[
                    {required: true,message:'账号不能为空', trigger: 'blur'}
                ],
                password:[
                    {required: true,message:'密码不能为空',trigger:'blur'}
                ]
            }
        }
    },
    created:function(){
    },
    methods: { 
        register(){
            this.$router.push({name:"UserRegisterView"});
        },
        login(){
            instance.post("/userinfo/UserLogin",this.userinfo).then(res=>{
                
                if(res.data.success){
                    console.log(res.data.data);
                    var token = res.data.data.token;
                    
                    window.sessionStorage.setItem("token",token);
                    window.sessionStorage.setItem("loginUser",JSON.stringify(res.data.data.loginUser));
                    /* 判断职位：进入相应的主界面 xxIndexView  进行路由跳转*/
                    if(res.data.data.companyUser == null){

                        this.$router.push({name:"PersonalIndexView"});
                        
                    }
                    
                    else{
                        this.companyUser = res.data.data.companyUser;
                        window.sessionStorage.setItem("positionId",res.data.data.companyUser.positionId);
                        window.sessionStorage.setItem("companyUserId",res.data.data.companyUser.id);
                        if(this.companyUser.positionId==1 && !this.companyUser.flag){
                            this.$router.push({name:"CompanyIndexView"});
                        }
                        else if(this.companyUser.positionId==2 && !this.companyUser.flag){
                            this.$router.push({name:"MinisterIndexView"});
                        }
                        else if(this.companyUser.positionId==3 && !this.companyUser.flag){
                            this.$router.push({name:"MemberIndexView"});
                        }
                    }                    
                }
                else{
                    alert("用户名或密码错误")
                }
            })
        }  
    },
}
</script>
<style scoped>

    .userLogin {
        
        width: 600px;
        height: 300px;
        margin: 0 auto;
        margin-top: 200px;
        margin-bottom: 200px;
        box-shadow: 0 2px 4px rgb(186, 25, 25, .12);
    }
    .login-title{
        margin-top: 30px;
        margin-left: 240px;
        margin-bottom: 30px;
        font-size: 30px;
    }
    .login-input{
        width: 400px;
        margin: 0 auto;
        margin-top: 20px;
        margin-left: 100px;
        margin-bottom: 20px;
    }
    .login-btn{
        text-align: center;
    }
    
    .login-btnLogin{
        margin-left: 100px;
    }
    .login-btnResgister{
        margin-right: 50px;
    }
</style>